p {
  text-align: center;
  font-family: 'Arial',monospace;
  font-size: 24pt;
  margin: 0px;
}
input {
  text-align: center;
  font-family: 'Arial',monospace;
  font-size: 24pt;
  color: #22570c;
  border-style: solid;
  border-color: #cccccc;
  border-width: 1;
  width: 580px;
}
textarea {
  text-align: center;
  font-family: 'Arial',monospace;
  font-size: 24pt;
  border-style: solid;
  border-color: #cccccc;
  border-width: 1;
  width: 100%;
}
td {
  text-align: center;
  font-family: 'Arial',monospace;
  font-size: 20pt;
  border-style: solid;
  border-width: 1;
  width: 52px;
  height: 52px;
}
sup, sub {
  font-size: 12pt;
}
.key_label {
  color: #bbbbbb;
}
.unused {
  border-width: 0;
}
.unused sub {
  color: transparent;
}
.keydown {
  border-style: inset;
}
.keyup {
  border-style: outset;
}
.light_blue {
  background-color: #cceeee;
}
.dark_blue {
  background-color: #77bbbb;
}
.light_green {
  background-color: #aaeba6;
}
.dark_green {
  background-color: #66b960;
}
.light_yellow {
  background-color: #eeeecc;
}
.dark_yellow {
  background-color: #cccc77;
}
.light_red {
  background-color: #f6ccce;
}
.dark_red {
  background-color: #e09090;
}
.missing {
  background-color: yellow;
}
.hit {
  background-color: green;
}
.typo {
  background-color: red;
}
